<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<h:head>
        <title>Bank of Quebec</title>
    </h:head>
    <h:body>
    	<h:outputStylesheet library="css" name="inputStyle.css" />
    	<f:event type="preRenderView" listener="#{productManagedBean.updateProductsList}" />
    	<p:layout fullPage="true">
            <p:layoutUnit position="north" size="268" resizable="false" closable="false" collapsible="false">
            	<div id="container" style="width:1145px">
	 				<div>
	 					<h:graphicImage library="images" name="main_buttons.png" />
	 					<h:form>
	 						<h:commandButton action="checkings_savings_account_description"  image="/resources/images/checkings_savings_button.png" style="position: absolute; left: 50px; top: 220px;"/>
	 						<h:commandButton action="credit_card_description"  image="/resources/images/credit_card_button.png" style="position: absolute; left: 400px; top: 218px;"/>
	 						<h:commandButton action="investment_account_opening"  image="/resources/images/investing_button.png" style="position: absolute; left: 700px; top: 218px;"/>
	 					</h:form>
	 				</div>
	 			</div>
            </p:layoutUnit>
            <p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
            	<ui:include src="client_options.xhtml" />
            </p:layoutUnit>
            <p:layoutUnit position="center">
            	<div id="container_main" style="width:700px">
	            	<p class="title_boq">PAYMENTS</p>
	            	<h:form>
	           			<h:commandButton id="subscribebill" action="bill_subscription" image="/resources/images/subscribebill_button.png" />
		                <br />
	            	</h:form>
	            	<h:form>
		                <ui:insert name="content">
		                	<table align="center">
			 					<tr>
						    		<td width="100px">Bill</td>
						    		<td>
						    			<h:selectOneMenu value="#{paymentManagedBean.payment.bill.reference}" style="width: 210px" required="true" id="bill">
	    									<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
	    									<f:selectItems value="#{paymentManagedBean.billsAvailable.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
										</h:selectOneMenu>
						    		</td>
						  		</tr>
						  		<tr>
								    <td>Account</td>
								    <td>
								    	<h:selectOneMenu value="#{paymentManagedBean.accountId}" style="width: 210px" required="true" id="account">
	    									<f:selectItem itemValue="#{null}" itemLabel="-- select one --" />
	    									<f:selectItems value="#{paymentManagedBean.fromProducts.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
										</h:selectOneMenu>
								    </td>
						  		</tr>
						  		<tr>
								    <td>Amount</td>
								    <td>
								    	<h:inputText id="paymentAmount"
								             value="#{paymentManagedBean.payment.value}" 
								             required="true" size="20">
										</h:inputText>
								    </td>
						  		</tr>
						  		<tr>
								  	<td colspan="2" align="center">
								  		<h:commandButton type="submit" id="transfer" action="#{paymentManagedBean.makePayment}" image="/resources/images/pay_button.png" />
								  	</td>
						  		</tr>
							</table>
		                </ui:insert>
		                <h:messages style="color:red;margin:8px;" />
	                </h:form>
	        	</div>
            </p:layoutUnit>
        </p:layout> 
    </h:body>
</html>